<script setup lang="ts">
type ImageData = {
  src: string;
  alt?: string;
};

const props = defineProps({
  imageData: {
    required: true,
    type: Array as PropType<Array<ImageData>>,
    default: () => [],
  },
  delay: {
    type: Number,
    default: 3000,
  },
});

// 当前轮播图片
const curIndex = ref<number>(0);
// 轮播进度
const currentTime = ref<number>(0);
// 定时器对象
const timer = ref<NodeJS.Timeout>();

onMounted(() => {
  swiper();
  // timer.value = setInterval(() => {
  //   currentTime.value = (currentTime.value % 100) + 10
  // }, 500)
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
});

const count = computed(() => {
  return (props.delay / props.imageData.length) / 100;
})

function swiper() {
  timer.value = setInterval(() => {
    currentTime.value = 0;
    curIndex.value =
      curIndex.value >= props.imageData.length - 1 ? 0 : curIndex.value + 1;

    const t = setInterval(() => {
      currentTime.value += 1;
      if (currentTime.value >= 100) {
        clearInterval(t);
      }
    }, count.value);
  }, props.delay);
}

defineOptions({
  name: "ImageSwiper",
});
</script>

<template>
  <div class="image-swiper w-full h-full">
    <div class="img-wrap">
      <img
        src="~@/assets/img/phone-frame.webp"
        class="phone-frame"
        style="opacity: 1"
        alt="手机框"
      />
      <img
        class="phone-content"
        v-for="(image, index) in imageData"
        :key="index"
        :class="{ active: curIndex == index }"
        :src="image.src"
      />
    </div>

    <!-- 进度块 -->
    <div class="progress-wrap flex items-center justify-center">
      <el-progress
        class="progress cursor-pointer"
        v-for="(video, i) in imageData"
        :key="video.src"
        :percentage="i == curIndex ? currentTime : 0"
        status="warning"
        :stroke-width="4"
        :show-text="false"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.phone-frame {
  position: relative;
  top: 0;
  z-index: 2;
  width: 411px;
  height: 647px;
}

.img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  .phone-content {
    position: absolute;
    z-index: 1;
    left: 8px;
    top: 8px;
    width: 234px;
    height: 520px;
    border-radius: 12px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
  }
  // 当前处于显示的图片
  .active {
    opacity: 1 !important;
  }
}

.progress-wrap {
  position: absolute;
  bottom: 50px;
  left: 8px;
  width: 234px;
  z-index: 2;
}

// 进度条样式深层穿透
:deep(.progress-wrap) {
  .progress {
    width: 40px;
    padding: 0 5px;
  }
}
</style>
